import React, { Component } from "react";
import _ from "lodash";
class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      value: "",
    };
    // 防抖
    this.debounce = _.debounce(this.debounce, 100);
    this.throttle = _.throttle(this.throttle, 1000);
  }
  //   节流
  throttle = () => {
    console.log("123");
  };
  // 接受防抖函数的返回值
  debounce = (event) => {
    //   敲回车填数据
    if (event.keyCode === 13) {
      //   if (!this.state.value) return;
      if (this.state.value.trim().length > 0) {
        this.setState({
          list: [...this.state.list, this.state.value],
          value: "",
        });
      }
    }
  };
  //   input的value显示
  changeInput = ({ target }) => {
    this.setState({
      value: target.value,
    });
  };
  //   删除数据
  del = (index) => {
    let list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list,
    });
  };
  render() {
    const { list, value } = this.state;
    return (
      <>
        {/* 输入框 */}
        <input
          type="text"
          placeholder="输入框"
          value={value}
          onChange={this.changeInput}
          onKeyUp={this.debounce}
        />
        <ul onScroll={this.throttle}>
          {list.map((item, index) => {
            return (
              <li key={index}>
                {index + 1}. {item}
                <button onClick={() => this.del(index)}>删除</button>
              </li>
            );
          })}
        </ul>
      </>
    );
  }
}

export default App;
